<template>
    <view class="collect">


        <!-- 单个卡片组件 -->
        <view class="cards">
            <view class="cardItem" v-for="(item,index) in list" :key="index"
                @tap="_toView('views/detail/index?id=' + item.job.id)">
                <view class="title mdTitle Han">
                    <view class="title-l">{{item.job.title}}</view>
                    <view class="salary">{{item.job.salary_min}}-{{item.job.salary_max}}K</view>
                </view>
                <view class="msg Han mdText" v-if="item.job.company">
                    <text>{{item.job.company.shortname}}</text>
                    <text>{{item.job.company.rzjd}}</text>
                    <text>{{item.job.company.gsgm}}</text>
                </view>

                <view class="tags mdText Han">
                    <view class="tag">
                        {{item.job.position}}
                    </view>
                    <view class="tag">
                        {{item.job.gzjy == '不限' ? '经验不限' : item.job.gzjy}}
                    </view>
                    <view class="tag">
                        {{item.job.zgxl == '不限' ? '学历不限' : item.job.zgxl}}
                    </view>
                </view>

                <view class="hr" v-if="item.job.company">
                    <image :src="item.job.company.logo" mode=""></image>
                    <view>{{item.job.company.shortname || item.job.company.name}}</view>
                    <view class="position md2Text Han">{{item.time}}</view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                page: 1,
                list: [],
                is_ajax: false,
                is_over: false,

                top: false,
            };
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {

        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function() {},

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function() {
            if (!this.top) {
                this.getList(1);
            }
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function() {},

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function() {},

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function() {
            this.getList(1);
        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function() {

        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function() {},
        methods: {
            getList(reset) {
                if (reset) {
                    this.page = 1;
                    // this.list = [];
                    this.is_ajax = false;
                    this.is_over = false;
                }
                if (this.is_ajax || this.is_over) return false;
                this.is_ajax = true;
                this._ajax({
                    url: '/api/user/getJobCollectList',
                    data: {
                        page: this.page
                    },
                    success: res => {
                        if (reset) {
                            uni.stopPullDownRefresh();
                            if (res.code == 1) {
                                this.list = res.data;
                                this.page++;
                            } else {
                                this.is_over = true;
                                this.list = [];
                                this._toast(res.msg);
                            }
                        }else{
                            if (res.code == 1) {
                                this.list = this.list.concat(res.data);
                                this.page++;
                            } else {
                                this.is_over = true;
                                this._toast(res.msg);
                            }
                        }
                        this.is_ajax = false;
                    }
                })
            },
            onPageScroll: function(e) {
                this.top = e.scrollTop >= 100;
            }
        }
    };
</script>
<style scoped lang="less">
    .collect {
        width: 750upx;
        margin: 0 auto;
        height: 100%;
        overflow: hidden;
        background-color: #f9f9f9;



        .cards {
            width: 100%;
            height: 100%;
            overflow-y: scroll;



        }

    }

    .cardItem {
        width: 100%;
        background-color: #fff;
        margin: 10upx auto;
        padding: 30rpx;
        position: relative;
        padding-bottom: 18upx;

        .title {
            color: #333;
            font-weight: normal;

            display: flex;
            align-items: flex-start;

            .title-l {
                flex: 1;
                margin-right: 20rpx;
            }

            .salary {
                color: #3f6bb0;
                margin-left: auto;
            }
        }

        .msg {
            padding-top: 20upx;
            color: #999999;

            text {
                padding-right: 30upx;
            }
        }

        .tags {
            display: flex;
            margin-top: 24upx;

            .tag {
                padding: 0 15upx;
                height: 45upx;
                line-height: 45upx;
                text-align: center;
                background-color: #F3FAFF;
                margin-right: 20upx;
            }
        }

        .hr {
            margin-top: 20rpx;
            display: flex;
            align-items: center;

            image {
                width: 72upx;
                height: 72upx;
                vertical-align: middle;
                margin-right: 20rpx;
                border-radius: 50%;
            }

            .position {
                color: #999;
                margin-left: auto;
            }
        }
    }
</style>
